<template>
  <component 
    :is="tag"
    :class="[
      'bx-link',
      'bx-text-primary',
      {
        'bx-link--disabled': disabled,
        'bx-link--underline': underline,
        [`bx-link--${theme}`]: theme
      }
    ]"
    :href="href"
    :target="target"
    :rel="rel"
    @click="handleClick"
  >
    <BxIcon v-if="prefixIcon" :name="prefixIcon" class="bx-link__prefix-icon" />
    <span class="bx-link__content">
      <slot>{{ content }}</slot>
    </span>
    <BxIcon v-if="suffixIcon" :name="suffixIcon" class="bx-link__suffix-icon" />
  </component>
</template>

<script>
import BxIcon from './BxIcon.vue'

export default {
  name: 'BxLink',
  components: {
    BxIcon
  },
  props: {
    content: {
      type: String,
      default: ''
    },
    href: {
      type: String,
      default: ''
    },
    target: {
      type: String,
      default: '_self'
    },
    rel: {
      type: String,
      default: ''
    },
    theme: {
      type: String,
      default: 'default',
      validator: (value) => ['default', 'primary', 'success', 'warning', 'danger'].includes(value)
    },
    underline: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    prefixIcon: {
      type: String,
      default: ''
    },
    suffixIcon: {
      type: String,
      default: ''
    },
    tag: {
      type: String,
      default: 'a'
    }
  },
  emits: ['click'],
  setup(props, { emit }) {
    const handleClick = (event) => {
      if (props.disabled) {
        event.preventDefault()
        return
      }
      emit('click', event)
    }

    return {
      handleClick
    }
  }
}
</script>

<style scoped>
.bx-link {
  display: inline-flex;
  align-items: center;
  gap: var(--bx-spacing-xs);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--bx-transition-medium);
  font-family: var(--bx-font-family);
  position: relative;
}

.bx-link:hover {
  opacity: 0.8;
  transform: translateY(-1px);
}

.bx-link--underline {
  text-decoration: underline;
}

.bx-link--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.bx-link--primary {
  color: rgba(0, 122, 255, 0.9);
}

.bx-link--success {
  color: rgba(52, 199, 89, 0.9);
}

.bx-link--warning {
  color: rgba(255, 149, 0, 0.9);
}

.bx-link--danger {
  color: rgba(255, 59, 48, 0.9);
}

.bx-link__content {
  position: relative;
}

.bx-link__prefix-icon,
.bx-link__suffix-icon {
  font-size: 0.9em;
}

/* 悬停下划线效果 */
.bx-link:not(.bx-link--underline):not(.bx-link--disabled)::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform var(--bx-transition-medium);
}

.bx-link:not(.bx-link--underline):not(.bx-link--disabled):hover::after {
  transform: scaleX(1);
}
</style>

